<template>
  <div class="con">
    <div class="iconLeft">
      <div class="icon">
        <i class="iconfont icon-dianbiao2"></i>
      </div>

      <div class="detailTop">
        <span class="name">3# 电箱</span>
        <span class="state">报错</span>
      </div>
      <div class="detailBottom">
        <span class="name">2022.05.19</span>
        <span class="state">16:20:20</span>
      </div>
    </div>
    <div class="tableRight">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="table-table"
        height="231"
        :cell-style="{
          color: '#fff',
          backgroundColor: '#0d1d4e',
          fontSize: '13px',
          textAlign: 'center',
        }"
        :row-style="{
          color: '#fff',
          backgroundColor: '#0d1d4e',
          fontSize: '13px',
          textAlign: 'center',
        }"
        :header-cell-style="{
          backgroundColor: '#0d1d4e',
          color: '#ffffff',
          fontSize: '15px',
          textAlign: 'center',
        }"
      >
        <el-table-column prop="date1" label="监测指标"> </el-table-column>
        <el-table-column prop="name" label="监测数据"> </el-table-column>
        <el-table-column prop="address" label="状态"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name:'electricBoxArea1',
  data() {
    return {
      tableData: [
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市",
        },
        {
          date1: "主体结构",
          name: "严重隐患",
          address: "上海市",
        },
        {
          date1: "主体结构",
          name: "重大隐患",
          address: "上海市",
        },
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市",
        },
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市",
        },
        {
          date1: "主体结构",
          name: "一般隐患",
          address: "上海市",
        },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.con {
  display: flex;
  width: 450px;
  height: 245px;
  .iconLeft {
    width: 180px;
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;
    color: rgb(215, 215, 215);
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      i {
        font-size: 100px;
      }
    }
    .detailTop {
      font-size: 14px;
      margin: 10px 0;

      .state {
        color: #e85449;
      }
    }
    .detailBottom {
      font-size: 12px;
    }
    .name {
      margin-right: 10px;
    }
  }
  .tableRight {
    width: 270px;
  }
}
</style>